<template>
    <Header></Header>
    <!-- 主内容区域 -->
    <main class="container max-w-screen-xl mx-auto p-4">
        <!-- grid 表格布局，分为 12 列，元素间隔为 gap-5  -->
        <div class="grid grid-cols-12 gap-5">
            <!-- 左边栏，占用 8 列 -->
            <div class="col-span-12 md:col-span-8 lg:col-span-9 mb-3">
                <!-- 文章列表，grid 表格布局，分为 2 列 -->
                <div class="grid grid-cols-12 gap-7">
                    <div class="col-span-12 md:col-span-6 lg:col-span-4 animate__animated animate__fadeInUp" v-for="(wiki, index) in wikiList" :key="index">
                        <div
                            class="relative bg-white h-full hover:scale-[1.03] border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                            <!-- 知识库封面 -->
                            <a @click="goWikiDetailPage(wiki.id, wiki.firstArticleId)" class="cursor-pointer">
                                <img class="rounded-t-lg h-36 w-full" :src="wiki.cover" alt="" />
                            </a>
                            <div class="p-5">
                                <!-- 知识库标题 -->
                                <a @click="goWikiDetailPage(wiki.id, wiki.firstArticleId)">
                                    <h2 class="text-xl font-bold tracking-tight text-gray-900 dark:text-white">
                                        <span class="hover:border-gray-600 hover:border-b-2 dark:hover:border-gray-400">{{ wiki.title }}</span>
                                    </h2>
                                </a>
                                <!-- 知识库摘要 -->
                                <p class="font-normal text-gray-500 dark:text-gray-400">
                                    {{ wiki.summary }}
                                </p>
                            </div>
                            <!-- 是否置顶 -->
                            <div v-if="wiki.isTop" class="absolute inline-flex items-center justify-center w-14 h-7 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 -end-2 dark:border-gray-900">
                                置顶
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 分页 -->
                <nav aria-label="Page navigation example" class="mt-10 flex justify-center">
                    <ul class="flex items-center -space-x-px h-10 text-base">
                        <li>
                            <a @click="getWikiData(current - 1)"
                                class="flex items-center justify-center px-4 h-10 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                                :class="[current > 1 ? '' : 'cursor-not-allowed']">
                                <span class="sr-only">Previous</span>
                                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                    viewBox="0 0 6 10">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="M5 1 1 5l4 4" />
                                </svg>
                            </a>
                        </li>
                        <li v-for="(pageOn, index) in pages" :key="index">
                            <a @click="getWikiData(pageOn)"
                                class="flex items-center justify-center px-4 h-10 leading-tight border hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
                                :class="[pageOn == current ? 'text-blue-600 bg-blue-50 border-blue-300 hover:bg-blue-100 hover:text-blue-700 dark:bg-gray-700' : 'text-gray-500 border-gray-300 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800']">
                                {{ index + 1 }}
                            </a>
                        </li>
                        <li>
                            <a @click="getWikiData(current + 1)"
                                class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                                :class="[current < pages ? '' : 'cursor-not-allowed']">
                                <span class="sr-only">Next</span>
                                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                    viewBox="0 0 6 10">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="m1 9 4-4-4-4" />
                                </svg>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>

            <!-- 右边侧边栏，占用一列 -->
            <aside class="col-span-12 md:col-span-4 lg:col-span-3">
                <div class="sticky top-[5.5rem]">
                    <UserInfoCard></UserInfoCard>
                    <CategoryCard></CategoryCard>
                    <TagCard></TagCard>
                </div>
            </aside>
        </div>

    </main>
    <ScrollToTopButton></ScrollToTopButton>
    <!-- 页脚 -->
    <Footer></Footer>
</template>

<script setup>
import Header from './components/Header.vue';
import Footer from './components/Footer.vue';
import ScrollToTopButton from './components/ScrollToTopButton.vue';
import { ref, onMounted } from 'vue';
import { getArticlePageList } from '@/api/frontend/article';
import { showMessage } from '@/composables/utils';
import UserInfoCard from './components/UserInfoCard.vue';
import CategoryCard from './components/CategoryCard.vue';
import TagCard from './components/TagCard.vue';
import { useRouter } from 'vue-router';
import { getWikiPageList } from '@/api/frontend/wiki';

const router = useRouter()

//知识库集合
const wikiList = ref([])
// 当前页码
const current = ref(1)
// 每页显示知识库数
const size = ref(12)

// 分页数据获取
// 总知识库数
const total = ref(0)
// 总页数
const pages = ref(0)

// 获取指定页的知识库数据
function getWikiData(currentOn) {
    if (currentOn < 1 || (pages.value > 0 && currentOn > pages.value)) return
    // 调用接口获取文章列表
    // 请求参数
    let params = {
        "current": currentOn,
        "size": size.value
    }
    getWikiPageList(params).then((res) => {
        if (res.success == true) {
            wikiList.value = res.data
            current.value = res.pageIndex
            size.value = res.size
            total.value = res.total
            pages.value = res.pages
        } else {
            let message = res.message
            showMessage(message, 'error')
        }
    })
}
// 初始化
getWikiData(current.value)

// 跳转到知识库详情页
const goWikiDetailPage = (wikiId, articleId) => {
    router.push({path: '/wiki/detail/' + wikiId, query: {articleId: articleId}})
}
</script>